<template>
	<view class="container">
		<view class="box">
			<template v-if="current==0">
				<One :userInfo="userInfo" @cpk="dgt"></One>
			</template>
			<template v-else-if="current==1">
				<Two></Two>
			</template>
			<template v-else-if="current==2">
				<Three></Three>
			</template>
			<template v-else-if="current==3">
				<Four></Four>
			</template>
			<template v-else>
				刷新页面
			</template>
		</view>
		<view class="tabbar">
			<block v-for="(item,index) in list" :key="index">
				<view class="child" @click="open(item,index)" :style="{'width':`${childWidth}px`}">
					<view class="img">
						<image :src="item.flag?item.selectUrl:item.url" mode=""
							:style="{'top':item.flag?'-52rpx':'0rpx'}"></image>
					</view>
					<view :style="{'color':item.flag?'#5ECD8D':'#D8D8D8','font-weight':item.flag?'bold':'normal'}">
						{{item.text}}
					</view>
				</view>
			</block>
		</view>
		<view class="bcg" :style="{'background-position':`-${long}px 0%`}">

		</view>
	</view>
</template>

<script>
	import One from "@/components/one/one.vue"
	import Two from "@/components/two/two.vue"
	import Three from "@/components/three/three.vue"
	import Four from "@/components/four/four.vue"
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		login,
		upPay
	} from '../../api/index.js'; //引入需要的api
	// 以下路径需根据项目实际情况填写
	export default {
		
		onLoad() {
			// #ifdef APP-PLUS
			const clientInfo = plus.push.getClientInfo()
			console.log(clientInfo)
			uni.getSystemInfo({
				success: res => {
					this.childWidth = (res.windowWidth - 22 * 2) / 4 //动态获取每个tabbar按钮宽度
					this.long = (1271 - res.windowWidth) / 2 + this.childWidth * 1.5 //动态获取使背景图居中
				}
			})
			// #endif
			// #ifdef H5
			let a = document.documentElement.clientWidth;
			console.log(a)
			this.childWidth = (a - 22 * 2) / 4 //动态获取每个tabbar按钮宽度
			this.long = (1271 - a) / 2 + this.childWidth * 1.5 //动态获取使背景图居中
			// #endif
		},
		onShow(){
			uni.setStorageSync('LOGIN_TOKEN',this.token)
		},
		computed: {
			...mapState([
				"openOff"
			])
		},
		components: {
			One,
			Two,
			Three,
			Four
		},
		data() {
			return {
				token:'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoiMTA5MzU3Nzg0NDc5NjM0NzU0IiwidXNlcl9rZXkiOiIzZTk5MjhjMC1lNTQ4LTRhYTktYWQxOC1kODhmMTg3YmU0YWUiLCJvcmdJZCI6bnVsbCwidXNlcm5hbWUiOiLpq5jnuqfpkasifQ.-UB3S68N89FFhlZXSPGSRkUjvX7M1TzDH1MW8Q4KE7P2FDkCpYHSXxOdbiK7Dokm_EVSd3EM8W6BOd7YCX9AFA',
				flag: false,
				userInfo: [],
				blueList: [3, 4, 5, 5],
				childWidth: 0, //每个底部tabbar按钮宽度根据手机动态变化
				beforeNumber: 0, //激活前初始的下标
				current: 0, //当前激活按钮的下标
				long: -494, //背景图初始位置

				list: [{
					text: '评测中心',
					flag: true,
					url: "/static/tabone.png",
					selectUrl: "/static/tabones.png",
				}, {
					text: '学情分析',
					flag: false,
					url: "/static/tabtwo.png",
					selectUrl: "/static/tabtwos.png",
				}, {
					text: '通知',
					flag: false,
					url: "/static/tabthree.png",
					selectUrl: "/static/tabthrees.png",
				}, {
					text: '我的',
					flag: false,
					url: "/static/tabfour.png",
					selectUrl: "/static/tabfours.png",
				}]
			}
		},
		methods: {
			...mapMutations(["changeOpen"]),
			search() {
				//Nativue.js操作手机系统模块
				var main = plus.android.runtimeMainActivity();
				var pkName = main.getPackageName();
				var NotificationManagerCompat = plus.android.importClass(
					"androidx.core.app.NotificationManagerCompat");
				// console.log(NotificationManagerCompat)
				//开启返回true,未开启false
				var isEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();
				//手机没有开启通知的权限
				if (!isEnabled) {
					//更改vuex的openOff状态
					this.changeOpen(true)
				} else {
					this.changeOpen(false)
				}
			},
			changes(res) {
				this.flag = res
			},
			//是子组件重新渲染
			dgt() {
				login({
					action: 'get'
				}).then(data => {
					console.log(data);
					if(data.code==200){
					this.userInfo=data.data.data
					}
				});
			},
			open(item, index) {
				if (index == this.current) {
					//重复点击不做处理	
				} else {
					this.beforeNumber = this.current
					this.current = index
					if ((this.current - this.beforeNumber) > 0) { //向右移动背景图
						this.long += -(this.current - this.beforeNumber) * this.childWidth
					} else { //向左移动背景图
						this.long -= (this.current - this.beforeNumber) * this.childWidth
					}
					//遍历list全部变成未激活状态
					this.list.forEach((items, indexs) => {
						items.flag = false
						this.$set(this.list, indexs, items)
					})
					//激活当前按钮
					item.flag = true
					this.$set(this.list, index, item)
				}
			}
		}
	}
</script>

<style lang="scss">
	:root {
		--long: -494rpx
	}

	.container {
		font-size: 14px;

		.box {
			padding-bottom: 192rpx;
		}

		.bcg {
			position: fixed;
			z-index: 2;
			width: 100%;
			bottom: 0rpx;
			background-image: url("../../static/bigbag.png");
			background-repeat: no-repeat;
			background-size: 1271px 107px;
			transition: background-position 0.4s ease-out;
			height: 107px;
		}

		.tabbar {
			position: fixed;
			z-index: 3;
			bottom: 0rpx;
			width: 100%;
			display: flex;
			padding: 0 22px;
			box-sizing: border-box;

			.child {
				height: 67px;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.img {
					width: 60rpx;
					height: 60rpx;
					margin-top: 20rpx;

					image {
						transition: top 0.4s ease-out;
						width: 100%;
						height: 100%;
					}

					margin-bottom: 4rpx;
				}
			}
		}
	}
</style>
